<script setup name="Index">
import { ref, reactive } from "vue";
import { parseTime } from "@/utils/ruoyi";
import {
  getCardsInfo,
  getLineData,
  getPieData,
  getTableData,
} from "@/api/index";
import MyEcharts from "@/components/MyEcharts.vue";
import * as echarts from "echarts";

const date = ref([]);
const totalNumberOfEnterprises = ref(18);
const numberOfCustomers = ref(18927542);
const numberOfContacts = ref(5);
const totalRevenue = ref(193476);
const leftOption = reactive({
  title: {
    text: "平台总收益趋势图",
    textStyle: {
      color: "#fff",
    },
    left: 10,
  },
  tooltip: {},
  xAxis: {
    axisLabel: {
      color: "rgba(255, 255, 255, 0.4)",
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255, 255, 255, 0.1)",
      },
    },
    data: ["7.7", "7.8", "7.9", "7.10", "7.11", "7.12", "7.13"],
  },
  yAxis: {
    axisLabel: {
      color: "rgba(255, 255, 255, 0.4)",
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255, 255, 255, 0.1)",
      },
    },
    splitLine: {
      lineStyle: {
        color: "rgba(255, 255, 255, 0.1)",
      },
    },
  },
  series: [
    {
      name: "平台总收益",
      type: "line",
      symbolSize: 10,
      itemStyle: {
        color: "rgba(0, 196, 116, 1)",
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(0, 196, 116, 0.20)" },
          { offset: 1, color: "rgba(0, 196, 116, 0)" },
        ]),
      },
      label: {
        show: true,
        color: "#fff",
        backgroundColor: "#00c474",
        width: 62,
        height: 17,
        borderRadius: 5,
        formatter: "￥{c}",
      },
      data: [3301.12, 2506.17, 4123.09, 3806.12, 5900.01, 5700.13, 6900.56],
    },
  ],
});
const rightOption = reactive({
  title: {
    text: "各触点营销占比",
    textStyle: {
      color: "#fff",
    },
    left: 10,
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  series: [
    {
      name: "各触点营销占比",
      type: "pie",
      label: {
        show: true,
        color: "rgba(255, 255, 255, 0.6)",
      },
      radius: "60%",
      labelLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.6)",
        },
      },
      data: [
        {
          value: 28,
          name: "短信",
          itemStyle: {
            color: "rgba(3, 133, 80, 1)",
          },
        },
        {
          value: 72,
          name: "外呼",
          itemStyle: {
            color: "rgba(0, 196, 116, 1)",
          },
        },
      ],
    },
  ],
});
const totalValue = ref(
  rightOption.series[0].data[0].value + rightOption.series[0].data[1].value
);
const outbound = ref(
  (((rightOption.series[0].data[1].value / totalValue.value) * 100) >> 0) + "%"
);
const message = ref(
  (((rightOption.series[0].data[0].value / totalValue.value) * 100) >> 0) + "%"
);

date.value = parseTime(new Date()).split(" ")[0].split("-");

const tableData = ref([
  {
    name: "中海华晟数字科技有限公司",
    cost: 8347.42,
  },
  {
    name: "中海华晟数字科技有限公司",
    cost: 8347.41,
  },
  {
    name: "中海华晟数字科技有限公司",
    cost: 8347.39,
  },
  {
    name: "中海华晟数字科技有限公司",
    cost: 8347.38,
  },
  {
    name: "中海华晟数字科技有限公司",
    cost: 8347.38,
  },
  {
    name: "中海华晟数字科技有限公司",
    cost: 8347.38,
  },
  {
    name: "中海华晟数字科技有限公司",
    cost: 8347.38,
  },
  {
    name: "中海华晟数字科技有限公司",
    cost: 8347.38,
  },
  {
    name: "中海华晟数字科技有限公司",
    cost: 8347.38,
  },
  {
    name: "中海华晟数字科技有限公司",
    cost: 8347.38,
  },
]);

// 获取卡片信息
// async function getCardsMessage() {
//   try {
//     const res = await getCardsInfo();
//   } catch (e) {
//     console.error(e);
//   }
// }
// getCardsMessage();

// 获取折线图数据
// async function getLineInfo() {
//   try {
//     const res = await getLineData();
//   } catch (e) {
//     console.error(e);
//   }
// }
// getLineInfo();

// 获取饼图数据
// async function getPieInfo() {
//   try {
//     const res = await getPieData();
//     tableData.value = res.data;
//   } catch (e) {
//     console.error(e);
//   }
// }
// getPieInfo();

// 获取表格数据
// async function getTableInfo() {
//   try {
//     const res = await getTableData();
//     tableData.value = res.data;
//   } catch (e) {
//     console.error(e);
//   }
// }
// getTableInfo();
</script>

<template>
  <div class="index_outer">
    <div class="index_top">
      <div class="welcome">
        <div>欢迎您!</div>
        <div>
          {{ date[0] + "年" + date[1] + "月" + date[2] + "日" }}
        </div>
      </div>
      <div class="cards">
        <div class="card_item">
          <div class="card_title">入驻企业总数&nbsp;&nbsp;(个)</div>
          <div class="card_data">
            {{ totalNumberOfEnterprises }}
          </div>
          <div class="card_img">
            <img
              src="@/assets/images/qiye.png"
              alt="加载失败" />
          </div>
        </div>
        <div class="card_item">
          <div class="card_title">精准触达客户数&nbsp;&nbsp;(个)</div>
          <div class="card_data">{{ numberOfCustomers }}</div>
          <div class="card_img">
            <img
              src="@/assets/images/kehu.png"
              alt="加载失败" />
          </div>
        </div>
        <div class="card_item">
          <div class="card_title">营销触点数&nbsp;&nbsp;(个)</div>
          <div class="card_data">{{ numberOfContacts }}</div>
          <div class="card_img">
            <img
              src="@/assets/images/chudian.png"
              alt="加载失败" />
          </div>
        </div>
        <div class="card_item">
          <div class="card_title">平台总收益&nbsp;&nbsp;(元)</div>
          <div class="card_data">{{ totalRevenue }}</div>
          <div class="card_img">
            <img
              src="@/assets/images/shouyi.png"
              alt="加载失败" />
          </div>
        </div>
      </div>
    </div>
    <div class="index_bottom">
      <div class="chart">
        <MyEcharts
          :width="'26.5vw'"
          :height="'50vh'"
          :options="leftOption"></MyEcharts>
      </div>
      <div class="chart">
        <p class="title">企业营销排行榜</p>
        <div class="table_head">
          <span>排名</span>
          <span>公司名称</span>
          <span>营销费用</span>
        </div>
        <div
          class="table_body"
          v-for="(item, index) in tableData">
          <div
            :class="{
              ranking: true,
              one: index === 0,
              two: index === 1,
              three: index === 2,
            }">
            {{ ++index }}
          </div>
          <div class="companyName">
            {{ item.name }}
          </div>
          <div class="marketingExpenses">
            {{ "￥" + item.cost }}
          </div>
        </div>
      </div>
      <div class="chart">
        <MyEcharts
          :width="'26.5vw'"
          :height="'50vh'"
          :options="rightOption"></MyEcharts>
        <span class="outbound">{{ outbound }}</span>
        <span class="message">{{ message }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.index_outer {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  color: #fff;
  .index_top {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .welcome {
      div:nth-of-type(1) {
        font-size: 32px;
        padding-bottom: 20px;
      }
      div:nth-of-type(2) {
        font-size: 18px;
      }
    }
    .cards {
      display: flex;
      width: 73vw;
      .card_item {
        margin-left: 3.5vw;
        width: 15vw;
        height: 12vh;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        background-image: url(@/assets/images/cardbg.png);
        background-repeat: no-repeat;
        background-position: 0 8vh;
        background-size: contain;
        background-color: rgba($color: #fff, $alpha: 0.05);
        position: relative;
        padding: 20px;
        .card_title {
          color: rgba(255, 255, 255, 0.6);
          font-size: 14px;
        }
        .card_data {
          padding-top: 1vh;
          font-size: 24px;
        }
        .card_img {
          position: absolute;
          top: 1vh;
          right: 0.5vw;
          img {
            width: 30px;
            height: 30px;
          }
        }
      }
    }
  }
  .index_bottom {
    margin-top: 2vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .chart {
      padding: 10px;
      width: 26.5vw;
      height: 50vh;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background-color: rgba(255, 255, 255, 0.05);
      position: relative;
      .outbound {
        position: absolute;
        font-size: 34px;
        top: 28vh;
        left: 9vw;
      }
      .message {
        position: absolute;
        font-size: 34px;
        top: 19vh;
        right: 7vw;
      }
    }
    .chart:nth-of-type(2) {
      padding: 10px 20px;
      .title {
        font-size: 18px;
        font-weight: bold;
      }
      .table_head {
        width: 24.3vw;
        display: flex;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(66, 68, 66, 1);
        border-radius: 4px 4px 0 0;
        font-size: 14px;
        color: #fff;
        margin-top: 3vh;
        span:nth-of-type(1) {
          padding: 10px 0 10px 1vw;
        }
        span:nth-of-type(2) {
          padding: 10px 0 10px 7.5vw;
        }
        span:nth-of-type(3) {
          padding: 10px 0 10px 6.5vw;
        }
      }
      .table_body {
        width: 24.3vw;
        display: flex;
        align-items: center;
        color: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(66, 68, 66, 1);
        font-size: 14px;
        border-radius: 0 0 4px 4px;
        .ranking {
          width: 3.5vw;
          padding: 6px 0 6px 0px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .one,
        .two,
        .three {
          color: rgba($color: #fff, $alpha: 0);
        }
        .one {
          background: url("@/assets/images/one.png") no-repeat center/contain;
        }
        .two {
          background: url("@/assets/images/two.png") no-repeat center/contain;
        }
        .three {
          background: url("@/assets/images/three.png") no-repeat center/contain;
        }
        .companyName {
          padding: 6px 0 6px 3.2vw;
        }
        .marketingExpenses {
          padding: 6px 0 6px 2.8vw;
        }
      }
    }
  }
}
</style>
